<template>
  <div class="ek-page">
    <ekDesc
      title="包裹信息"
      desc="包裹信息是用户邮寄的物品的目的地，并被管理员入库的包裹。"
    />
    <div style="display: flex;height: calc(100% - 146px); margin-top: 8px;">
      <div class="left-list">
        <el-tree
          :expand-on-click-node="false"
          :highlight-current="true"
          :default-expand-all="true"
          :data="orderState"
          :props="{
            children: 'children',
            label: 'dimension_name',
            value: 'dimension_value',
          }"
          @node-click="handleStateClick"
        />
      </div>

      <ekList
        :layoutData="layoutData"
        ref="refList"
        style="width: calc(100% - 250px)"
      >
        <template v-slot:operate>
          <div class="ek-btn-group" :class="mode" v-if="buttons?.length">
            <template v-for="(item, index) in buttons">
              <el-button
                v-if="item.state == currentState || item.state == 'all'"
                :key="index"
                @click.stop="handleOperate(item)"
                :loading="item.loading ? true : false"
                :size="size"
                :type="item.type"
                plain
              >
                <el-icon
                  :class="['ek-btn-group-icon', item.icon]"
                  size="14"
                  v-if="item.icon"
                />
                {{ item.text }}
              </el-button>
            </template>
          </div>
        </template>
        <template #operateColumn="{ scope }">
          <ekBtnGroup
            mode="column"
            size="small"
            :params="{ row: scope.row }"
            :buttons="columnButtons"
            @operate="(item) => handleOperate(item, scope)"
          />
        </template>
        <template #orderInboundImages="{ scope }">
          <template v-if="scope.row.order_inbound_images?.length">
            <el-image
              style="width: 60px; height: 60px; z-index: 99"
              :src="getImges(scope.row.order_inbound_images)"
            >
            </el-image>
          </template>
          <template v-else> -- </template>
        </template>
        <template #volume="{ scope }">
          {{
            (
              (Number(scope.row.order_good_length) *
                Number(scope.row.order_good_width) *
                Number(scope.row.order_good_height)) /
              1000000
            ).toFixed(3)
          }}
        </template>
        <template #tj="{ scope }">
          {{scope.row.order_good_length}} *{{scope.row.order_good_width}}*{{ scope.row.order_good_height }}
        </template>

        
      </ekList>
    </div>
  </div>
  <Inbound
    :title="title"
    :rowId="rowId"
    :disabled="disabled"
    v-model:visiable="visiable"
    @submit="confirm"
  />
  <Outbound
    :rowArr="rowArr"
    v-model:visiable="outVisiable"
    @submit="confirmOutbound"
  />
</template>

<script setup>
import { defineComponent, onMounted, getCurrentInstance, ref } from "vue";
import {
  configs,
  searchs,
  pages,
  columns,
  buttons,
  columnButtons,
  apis,
} from "./data.js";

import ekList from "@/components/business/ekList/index.vue";
import ekBtnGroup from "@/components/business/ekList/components/ekBtnGroup.vue";
import Inbound from "./components/Inbound.vue";
import Outbound from "./components/Outbound.vue";
import ekDesc from "@/components/business/ekDesc/index.vue";

import { getDimensionByCode } from "@/utils/sys.js";
import { useRouter } from "vue-router";
//router 使用
const router = useRouter();
defineComponent({
  name: "order-index",
});
const {
  appContext: {
    config: { globalProperties },
  },
} = getCurrentInstance();

const { $storage, $http, $ekMessage, $ekMessageBox, $imageBaseUrl } =
  globalProperties;

let refList = ref(null);
// 表格头部
let layoutData = ref({
  modelCode: "MODEL_BUSINESS_MANAGE",
  configs,
  // 查询条件
  searchs,
  // 分页配置
  pages,
  // 按钮配置
  buttons,
  // 显示字段
  columns,
});
const getImge = (str) => {
  let arr = JSON.parse(str);
  let newArr = [];
  for (let i in arr) {
    newArr[i] = $imageBaseUrl + arr[i];
  }
  return newArr;
};
const getImges = (str) => {
  let arr = JSON.parse(str);
  let newArr = [];
  for (let i in arr) {
    newArr[i] = $imageBaseUrl + arr[i];
  }
  return newArr;
};
const outVisiable = ref(false);
const visiable = ref(false);
const rowId = ref("");
const title = ref("");
const disabled = ref(false);
const handleOperate = (item, scope) => {
  switch (item.operate) {
    case "add":
      add();
      break;
    case "edit":
      edit(scope);
      break;
    case "deleteAll":
      deleteAll();
      break;
    case "delete":
      deleteOne(scope);
      break;
    case "detail":
      detail(scope);
      break;
    case "outbound":
      outbound();
      break;
    case "stateOn":
      state(1);
      break;
    case "stateOff":
      state(0);
      break;
  }
};
const state = (state) => {
  let rows = refList.value.getSelectionRows();
  if (rows.length == 0) {
    $ekMessage.warning("请选择操作数据");
    return;
  }
  let ids = rows.map((item) => item.id);
  $http.post(apis.state, { ids: ids, state: state }).then((res) => {
    $ekMessage.success("操作成功");
    refresh();
  });
};
const rowArr = ref([]);
const outbound = () => {
  let rows = refList.value.getSelectionRows();
  if (rows.length == 0) {
    $ekMessage.warning("请选择操作数据");
    return;
  }
  rowArr.value = rows;
  outVisiable.value = true;
};

const detail = (scope) => {
  // title.value = "详情";
  // rowId.value = scope.row.id;
  // visiable.value = true;
  // disabled.value = true;
  router.push({
    path: "/order/detail",
    query: {
      order_logistic_no: scope.row.order_logistic_no,
    },
  });
};
const add = () => {
  title.value = "新增";
  rowId.value = "";
  visiable.value = true;
  disabled.value = false;
};
const edit = (scope) => {
  title.value = "编辑";
  rowId.value = scope.row.id;
  visiable.value = true;
  disabled.value = false;
};
const deleteOne = (scope) => {
  let ids = [scope.row.id];
  del(ids);
};
const deleteAll = () => {
  let rows = refList.value.getSelectionRows();
  if (rows.length == 0) {
    $ekMessage.warning("请选择操作数据");
    return;
  }
  let ids = rows.map((item) => item.id);
  del(ids);
};
const del = (ids) => {
  $ekMessageBox.confirm("确认删除？").then(() => {
    $http
      .get(apis.del, {
        params: {
          ids: ids,
        },
      })
      .then((res) => {
        $ekMessage.success("操作成功");
        refresh();
      });
  });
};
const confirm = (done) => {
  refresh();
  done();
};
const confirmOutbound = () => {
  refresh();
  outVisiable.value = false;
};
const refresh = () => {
  refList.value.refresh();
};
const currentState = ref("");
const handleStateClick = (item) => {
  if (item.dimension_value == "") {
    refresh();
    return;
  }
  refList.value.refresh({
    order_state: item.dimension_value,
  });
  currentState.value = item.dimension_value;
};
const orderState = ref([]);
onMounted(async () => {
  const arr = await getDimensionByCode("DIM_ORDER_STATE");
  console.log(orderState.value);
  orderState.value = [
    {
      dimension_name: "订单状态",
      dimension_value: "",
      children: arr,
    },
  ];
});
</script>
<style scoped lang="scss">
.page {
  background-color: #f4f4f4;
}
.left-list {
  padding: 4px;
  width: 230px;
  height: 100%;
  background-color: #fff;
  flex-shrink: 0;
  border-radius: 4px;
  margin-right: 10px;
}
.ek-btn-group {
  display: flex;
  justify-content: center;
  > .el-button {
    margin-left: 12px;
  }
  &.column {
    > .el-button {
      margin-left: 6px;
      border: none;
      background: unset;
      padding: 2px;
      color: var(--text-link-color);
      cursor: pointer;
      &:hover {
        color: var(--text-link-hover-color);
      }
    }
    > .el-button--danger {
      color: var(--button-danger-plain-text-color);
      &:hover {
        color: var(--button-danger-plain-text-color);
      }
    }
  }
  .ek-btn-group-icon {
    margin-right: 4px;
    font-weight: bold;
  }
}
</style>
